<template>
  <div class="tophead" v-if="isRedoal">
	  <div style="background-color: #fff;">
		<div class="ptitle">{{ homepagelist.title }}</div>
    <div class="timestart">{{ homepagelist.createTime }}</div>
    <div class="imgp"><img :src="homepagelist.pic" alt="" /></div>
    <div class="contentp ql-editor" v-html="homepagelist.content"></div>
	<!-- <div class="readcount">
		
	</div> -->
	<div class=" bottom flex_lr_m">
		<div>
			<span style="color: #ddd;margin-right: 12px;" >阅读 {{ homepagelist.count }}</span>
			<span style="color: #536177;margin-right: 12px;" @click.stop="readIng" v-if="homepagelist.activityId">阅读原文</span>
			<span style="color: #536177;margin-right: 12px;" v-if="isFirst==0" @click.stop="toJumpGZH">关注公众号</span>
			<span  @click.stop="toCollect"><van-icon v-if="homepagelist.isCollect==1" name="star" color="#536177" /><van-icon name="star-o" color="#536177"v-else  /> {{homepagelist.isCollect==1?'已收藏':'收藏'}}</span>
		</div>
		<div>
			<span @click.stop="toGive"><van-icon v-if="homepagelist.isGive==1" name="good-job" color="#536177" /><van-icon name="good-job-o" color="#536177"v-else /> {{homepagelist.isGive==1?'已点赞':'点赞'}}</span>
		</div>
	</div>  
	  </div>
    
	<div class="write flex_c_m" @click.stop="isWrite=true"  v-if="!isWrite && rentList.length==0">写留言</div>
	<div class="flex_lr_m bottom" style="padding:20px;"  v-if="!isWrite && rentList.length!=0">
		<span style="color: #AAAAAA;">精选留言</span>
		<span @click.stop="isWrite=true">写留言</span>
	</div>
	<div  style="padding: 20px;height: 200px; " v-if="isWrite">
		<div class="flex_lr_m"style="color: #AAAAAA;margin-bottom: 6px;" >
			<span >写留言</span>
			<span @click.stop="isWrite=false">取消</span>
		</div>
		<!-- <el-input
		  type="textarea"
		  :rows="4"
		  placeholder="留言精选后,将对所有人可见"
		  v-model="textarea">
		</el-input> -->
		<van-field
		style="border: 1px solid #dcdfe6;"
		  v-model="textarea"
		  rows="3"
		  autosize
		  label=""
		  type="textarea"
		  placeholder="留言精选后,将对所有人可见"
		  maxlength="50"
		  show-word-limit
		/>
		<div @click.stop="toRent" style="float: right; margin-top:8px;padding: 5px 10px;border-radius: 6px;color: #fff;background-color: green;" v-if="textarea.length">留言</div>
	</div>
	<template v-for="(item , index) in rentList">
		<div class="single-rent flex_lr" style="padding: 0 20px;margin-bottom: 12px;">
		<img :src="item.usericon" style="width: 30px;height: 30px;border-radius: 5px;"/>
		<div class="" style="width: calc(100% - 40px);">
			<div style="color: #AAAAAA;font-size: 14px;" class="flex_lr_m">
				<div class="flex_line">
					<div>{{item.userName}}</div>
				<div>{{item.createTime}}</div>
				</div>
					<div @click.stop="toDeleteRent(index)" style="color: #536177;" v-if="userId==item.userId && userId">删除</div>
				
			</div>
			<div style="color: #AAAAAA;font-size: 12px;"></div>
			<div style="font-size: 15px;">{{item.content}}</div>
		</div>
	</div>
	</template>
	
  </div>
</template>

<script>
import { getToken, setToken, removeToken, delToken } from "@/utils/auth";
import { MessageBox, Toast } from "mint-ui";
import request from "@/utils/request";
export default {
  data() {
    return {
      video: "",
      userId: 0,
      nowurl: "",
      urlimage:
        "http://mmbiz.qpic.cn/mmbiz_jpg/Y9CicsYH6fWOAvmiaWnBZ1cGgSmLCw8QJAdB5h0ZJ7fj7vEOUlX6Tlz3906ia2lqW90Zp7gcZIPYEAW2AFDeicEjjA/0?wx_fmt=jpeg",
      code: 0,
      homepagelist: "",
      readActivity: "",
	  
	  isWrite:false,//写留言
	  textarea:'',//留言内容
	  rentList:[],
	  isCollect:false,
	  isGive:false,
	  isSend:false,
	  isDelete:false,
	  userId:'',
	  isRedoal:false,
	  isFirst:window.sessionStorage.getItem('first')
    };
  },
  created() {
		let userId=window.localStorage.getItem('userId')
	 if(this.$route.params.time){
	 	window.location.reload() 
	 }else{
	this.isRedoal=true
	 }
    this.video = JSON.parse(this.$route.query.row);
	this.userId=localStorage.getItem('user')
    console.log(this.video);
	
  },
  async mounted() {
    await this.hint();
    await this.homepage();
	await this.getRent();
  },
  methods: {
    //个人id
    hint() {
      //   console.log("getinfo", "提示");
      return request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        this.userId = response.user.id;
        this.nowurl = window.location.href;
        // console.log(this.nowurl);
      });
    },
    //页面详情
    homepage() {
      let query = { articleId: this.video };
      return request({
        url: "generator/article/front/info",
        method: "get",
        params: query,
      }).then((response) => {
        console.log(response.article.activityId);
		let _img=response.article.content.replace(/<img/g, '<img style="max-width: 100%;" ')
		response.article.content=_img
        this.homepagelist = response.article;
        this.readActivity = response.article.activityId;
      });
    },
	getRent(){
		let query = { articleId: this.video };
		return request({
		  url: "generator/comment/front/list",
		  method: "get",
		  params: query,
		}).then((response) => {
			this.rentList=response.list
		});
	},
    readIng() {
      const read = this.readActivity.split(",");
	  console.log(read[read.length-1])
	  if(read[read.length-1]==4){
		 window.location.href =read[0]
	  }else{
		 console.log(read);
		 const arr = {
		   id: Number(read[0]),
		   other: Number(read[1]),
		   draw: Number(read[2]),
		 };
		 console.log(arr);
		 let row = JSON.stringify(arr.id);
			 let userId=window.localStorage.getItem('userId')

		 if (arr.draw == 0) {
		   if (arr.other == 0) {
		     this.$router.push({ name: "turntable", query: { row: row ,shareUserId:userId},	params:{time:new Date().getTime()} });
		   } else if (arr.other == 1) {
		     this.$router.push({ name: "draw", query: { row: row,shareUserId:userId } ,	params:{time:new Date().getTime()}});
		   }
		 } else if (arr.draw == 1) {
		   this.$router.push({ name: "Participate", query: { row: row ,shareUserId:userId},	params:{time:new Date().getTime()} });
		 } else if (arr.draw == 2) {
		   this.$router.push({ name: "clockIn", query: { row: row ,shareUserId:userId},	params:{time:new Date().getTime()} });
		 } 
	  }
      
    },
	toJumpGZH(){
		this.$router.push({ name: "jumpGZH" });
	},
	// 保存评论
	toRent(){
		if(this.isSend)return
		this.isSend=true
		request({
		  url: "/generator/comment/front/save",
		  method: "post",
		  data: { articleId: this.homepagelist.id, content: this.textarea}
		}).then((response) => {
			this.isWrite=false
			this.textarea=''
			this.isSend=false
			this.getRent();
			// console.log(this.isWrite)
			Toast({
			  message:'发布成功！',
			  iconClass: "glyphicon glyphicon-ok",
			});
		});
	},
	// 收藏
	toCollect(){
		if(this.isCollect)return
		this.isCollect=true
		request({
		  url: "/generator/article/front/collect?articleId="+this.homepagelist.id,
		  method: "get"
		}).then((response) => {
			this.isCollect=false
			if(response.message=="收藏成功"){
				this.$set(this.homepagelist,'isCollect',1)
			}else{
			this.$set(this.homepagelist,'isCollect',0)
			}
			Toast({
			  message:response.message,
			  iconClass: "glyphicon glyphicon-ok",
			});
		});
	},
	//点赞
	toGive(){
		if(this.isGive)return
		this.isGive=true
		request({
		  url: "/generator/article/front/give?articleId="+this.homepagelist.id,
		  method: "get"
		}).then((response) => {
			this.isGive=false
			if(response.message=="点赞成功"){
				this.$set(this.homepagelist,'isGive',1)
			}else{
			this.$set(this.homepagelist,'isGive',0)
			}
			Toast({
			  message:response.message,
			  iconClass: "glyphicon glyphicon-ok",
			});
		});
	},
	toDeleteRent(index){
		
		if(this.isDelete)return
		this.isDelete=true
		request({
		  url: "/generator/comment/front/delete?commentId="+this.rentList[index].id,
		  method: "get"
		}).then((response) => {
			this.isDelete=false
			this.getRent();
			// if(response.message=="点赞成功"){
			// 	this.$set(this.homepagelist,'isGive',1)
			// }else{
			// this.$set(this.homepagelist,'isGive',0)
			// }
			Toast({
			  message:'删除成功',
			  iconClass: "glyphicon glyphicon-ok",
			});
		});
	}
	
  },
};
</script>

<style lang="less" scoped>
.tophead {
  // text-align: center;
  min-height: 100vh;
  background-color: #ededed;
  padding-bottom: 20px;
}
.ptitle {
//   text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding: 20px 20px 0 20px;
}
.timestart {
  color: #ddd;
  padding: 20px;
}
.imgp {
  //   border: 1px solid red;
  padding: 20px;
  box-sizing: border-box;
  img {
    width: 100%;
    height: 100%;
  }
}
.contentp {
  font-size: 16px;
  padding: 20px;
  text-align: justify;
}
.readcount ,
.bottom{
  padding: 8px 20px;
  box-sizing: border-box;
  
}
.bottom{
	color: #536177;
}
.write{
	padding: 12px 0 28px;
	color: #536177;
	font-size: 14px;
}
</style>